<script setup>
import {onMounted, reactive, ref} from "vue";
import PageComponent from "@/components/index/PageComponent.vue";
import {$ajax, apiUrl} from "@/utils/ajax";

const data = reactive([])
const loading = ref(false)
const pageSize = ref(50)
const page = ref(1)
const total = ref(0)
const handlData = (p) => {
  page.value = p
  loading.value = true
  $ajax.get(`${apiUrl}admin/pack_bag/order`, {
    params: {
      page: page.value,
      pageSize: pageSize.value,
      state: [2,3]
    }
  }).then(({data: {result: {lst, total: tol}}}) => {
    data.splice(0, data.length, ...lst)
    total.value = tol
    loading.value = false
  }).catch(() => loading.value = false)
}
onMounted(()=>{
  handlData(1)
})
</script>

<template>
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>礼包兑换记录</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="search">
    <!--    <el-button type="primary" @click="router.push({name:'packEdit'})">新增</el-button>-->
  </div>
  <el-table :data="data" v-loading="loading" height="75vh" border stripe size="small" class="table-data">
    <el-table-column prop="order_sn" label="订单编号"/>
    <el-table-column prop="productData.name" label="礼品"/>
    <el-table-column prop="gift" label="礼包">
      <template #default="{row}">
        {{row.gift.name}}·{{row.attrData.name}}
      </template>
    </el-table-column>
    <el-table-column prop="number" label="数量"/>
    <el-table-column prop="price" label="价值"/>
    <el-table-column prop="order_sn" label="状态" align="center">
      <template #default="{row}">
<!--        {{row.state==1?'已兑换':'未兑换'}}-->
        <el-text type="primary" size="small" v-if="row.state === 2">未激活</el-text>
        <el-text type="success" size="small" v-if="row.state === 3">已激活</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="mobile" label="预留手机号"/>
    <el-table-column prop="create_time" label="兑换时间"/>
  </el-table>
  <page-component :size="pageSize" :page="page" :total="total" @get-data="handlData"/>
</template>

<style scoped lang="scss">

</style>
